<template>
  <div class="home">
    <!-- 垫脚石 -->
    <!-- <div id="h40"></div> -->
    <!-- 通知栏 -->
    <div class="NoticeBar">
       <van-notice-bar
          text="1233211231213  "
          left-icon="volume-o"
        />
    </div>
    <!-- <div id="n40"></div> -->
    <!-- 通知栏结束 -->
    <!-- 头部二导航开始 -->
    <div id="twoNavBar">
      <van-row type="flex" id="twoNavBarone">
        <van-col span="3" tag="a">精选</van-col> 
        <van-col span="3" tag="a">秒杀</van-col>
        <van-col span="3" tag="a">手机</van-col>
        <van-col span="3" tag="a">食品</van-col>
        <van-col span="3" tag="a">家电</van-col>
        <van-col span="3" tag="a">数码</van-col>

        <!-- <div id="twovan-row"> -->
        <van-col span="6">
          <van-dropdown-menu>
            <van-dropdown-item title="更多" :options="option2" />
          </van-dropdown-menu>
        </van-col>
        <!-- </div> -->


      </van-row>
    </div>
    <!-- 头部二导航结束 -->
    <!-- 轮播图开始 -->
    <div id="Swipe">
        <van-swipe :autoplay="300" >
          <van-swipe-item v-for="(image, index) in imageList" :key="index">
              <img :src="image" style="width:100%;height:140px; margin:1px;" />
          </van-swipe-item>
        </van-swipe>
    </div>
    <!-- 轮播图结束 -->
    <!-- 4*2宫格 -->
    <div id="oneGrid">
      <van-grid>
        <van-grid-item icon="photo-o" text="图片" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
    </div>
    <!-- 4*2宫格结束 -->
    <!-- 2*~宫格 -->
    <div id="twoGrid">
        <van-grid :border="false" :column-num="2">
            <!--商品详情-->
              <van-grid-item to="./about" >
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                  <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
                  
              </van-grid-item>
        
            <van-grid-item to="./">
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                 <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
              </van-grid-item>

            <van-grid-item to="./">
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                  <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
              </van-grid-item>
              
            <van-grid-item to="./">
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                  <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
              </van-grid-item>

            <van-grid-item to="./">
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                  <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
              </van-grid-item>
              <van-grid-item to="./">
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                  <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
              </van-grid-item>
              <van-grid-item to="./">
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                  <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
              </van-grid-item>
              <van-grid-item to="./">
                <img src="../assets/bbb.png" style="width:100px;height:130px;" text="商品介绍"/>
                  <div class="twoGrid_2"><img src="../assets/aaa.png" alt="" style="width:44px;height:14px; ">
                  <div class="twoGrid_3"><span>【十支装】樱花异芯丝软毛牙刷家庭装独立包装收纳桶颜色随机混色发</span></div>
                 <!-- <div class="twoGrid_4">
                    <span class="twoGrid_4_1"><span>¥</span><span class="twoGrid_4_2">4</span><span class="twoGrid_4_3">.9</span></span>
                  </div> -->
                  <div class="twoGrid_5">2.9万人已拼</div>
                  <div class="twoGrid_6_1">...</div>
                  </div>
              </van-grid-item>
        </van-grid>
        <div>
        <van-loading color="#1989fa" />
        </div>
    </div>
    <!-- 2*~宫格结束 -->

    <div id="aaab">
      
    </div>


  </div>
</template>

<script>

export default {
  data() {
    return {
              isShow: false,
              pingan: "",
              times: "",
              imageList: [
                  require('../assets/logo.png'),
                  require('../assets/logo.png'),
                  require('../assets/logo.png'),
              ],
              active: 1,
              notificationList: [],

              // value1: 0,
              // value2: 'a',
              // option1: [
              //   { text: '全部商品', value: 0 },
              //   { text: '新款商品', value: 1 },
              //   { text: '活动商品', value: 2 }
              // ],
              option2: [
                { text: '好评排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
                { text: '销量排序', value: 'c' },
                { text: '销量排序', value: 'c' },
                { text: '销量排序', value: 'c' },
                { text: '销量排序', value: 'c' },
                { text: '销量排序', value: 'c' },
              ]
          }
  }
  };
  


</script>
<style lang="scss">
  * {
      padding: 0px;
      margin: 0px; 
  }
  #h40 {
    height: 40px;
  }
  #aaab {
    height: 50px;
    background: #FFF;
  }
  #Swipe {
    background: #FFFFFF;
    padding-bottom: 10px;
    padding-top: 10px;

  }
  #twoNavBar {
    background: #FFFFFF;
    height: 50px;
  }
  #twoNavBarone>a {
    line-height: 55px;
    text-align: center;
  }
  #twovan-row {
    padding-left: 50px;
  }
  .twoGrid_1 {
    width: 170px;
    height: 280px;
    background:#FFF;
    // position: absolute;
    
  }
  .twoGrid_2 {
    height: 90px;
  }
  .twoGrid_2>img{
    height: 0.7rem; 
    width: 2.2rem;
    position:relative;
    float: left;
    left: 0px;
    bottom: 0px;
  }
  .twoGrid_3 {
      display: inline-block;
      vertical-align: middle;
  }
  .twoGrid_3>span {
    height: 2.1rem;
    line-height: 1.05rem;
    font-size: .7rem;
    overflow: hidden;
    color: #434343;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .twoGrid_4 {
    display: inline-block;
    vertical-align: middle;
    color: #ff4142;
    font-family: JDZH-Regular,sans-serif;
    font-size: .7rem;
    line-height: 1.5rem;
    position: absolute;
    left: -153px;
    top:-77px; 
  }
  .twoGrid_4_2 {
        font-size: 1rem;
  }
  .twoGrid_5 {
    color: #aaa;
    margin-bottom: .25rem;
    height: .9rem;
    font-size: .6rem;
    color: #333;
    line-height: .9rem;
    position: relative;
    top: 0px;
    left: -47px;
  }
 .twoGrid_6_1 {
   width: 27px;
   height: 27px;
   position: relative;
   right: -150px;
   bottom: 25px;
 }
  
  

</style>